// 访问设备统计接口地址
let visitorCountUri = "/api/visitor-count/";

// 访问设备总览视图
let systemChartOption = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问设备系统分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            top: "10%",
            itemStyle: {
                normal: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                    label: {
                        show: true,
                        formatter: '{b} : {c} \n({d}%)'
                    },
                    labelLine: {
                        show: true
                    }
                }
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {},

            labelLine: {
                show: false
            },
            data: [

            ]
        }
    ]
};

let browserChartOption = {
    title: {
        text: '访客浏览器分布',
        left: "right",
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '访客浏览器分布情况',
            type: 'pie',
            radius: '50%',
            top: "10%",
            data: [
                {value: 1048, name: 'Chrome'},
                {value: 735, name: 'Firefox'},
                {value: 580, name: 'Safari'},
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',

                }
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        formatter: '{b} : {c} \n({d}%)'
                    },
                    labelLine: {show: true}
                }
            }
        }
    ]
};

function getChartData(listName){  // 获取数据接口列表值
    let data = [];

    $
        .ajax({
            url: visitorCountUri,
            type: "GET",
            async: false,
            dataType: "JSON",
        })
        .done((res)=>{
            for (let i=0;i<res["data"][listName].length;i++){
                data.push({"value": res.data[listName][i][1], "name": res.data[listName][i][0]});
            }
        })
        .fail({
        });
    return data
}

// 激活图表
function activeChar1(){
    let sysBox = document.getElementById("echarts-dom");
    let option = systemChartOption;

    let data = getChartData("systemList");
    let sysChart = echarts.init(sysBox);
    option.series[0].data = data;
    sysChart.setOption(option)
}


function activeChar2(){
    let browserBox = document.getElementById("echarts-dom2");
    let browserChart = echarts.init(browserBox);

    let option = browserChartOption;
    option.series[0].data = getChartData("browserList");

    browserChart.setOption(option);
}

activeChar1();
// setInterval(activeChar1, 5000);
activeChar2();
// setInterval(activeChar2, 5000);

// 访问总数

function getTotalVisitNum(){
    $
        .ajax({
            url: visitorCountUri,
            type: "GET",
            dataType: "JSON",
        })
        .done((res)=>{
            let count = res.data.count;
            let countBox = document.getElementById("clickNum");
            countBox.innerText = count;
        })
        .fail({
        });
}

getTotalVisitNum();
// setInterval(getTotalVisitNum, 5000);
